import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import {
  Form,
  Button,
  Row,
  Col,
  Divider,
  Input,
  Select,
  DatePicker,
  Icon
} from 'antd'

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

const filterStyle = {
  style: {
    marginBottom: 16
  }
};

const formItemLayout = {
  labelCol: {
    span: 6
  },
  wrapperCol: {
    span: 18
  }
};
const Option = Select.Option;

const OrderFilterUnExpand = ({
  filterItems,
  onFilterChange,
  isExpand,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue
  },
  expand,
  noExpand
}) => {
  let filterItemsDealed;
  if (isExpand) {
    filterItemsDealed = filterItems;
  } else {
    if (filterItems.length > 3) {
      filterItemsDealed = filterItems.slice(0, 2);
    } else {
      filterItemsDealed = filterItems;
    }
  }

  const handleFields = (fields) => {
    for (let key in fields) {
      let field = fields[key];
      // 删除请求中为空的对象
      if (!field || (_.isString(field) && field.replace(/(^\s*)|(\s*$)/g, "").length == 0)
        || _.isUndefined(field)
        || _.isNull(field)
        || (_.isArray(field) && field.length === 0)) {
        delete fields[key];
        continue;
      }
      // 处理日期类型
      if (_.endsWith(key, "Time") && _.isArray(fields[key]) && fields[key].length > 0) {
        let timeStartValue = fields[key][0].valueOf();
        let timeEndValue = fields[key][1].valueOf();
        let timeStartKey = key + "Start";
        let timeEndKey = key + "End";
        fields[timeStartKey] = timeStartValue;
        fields[timeEndKey] = timeEndValue;
        delete fields[key];
      }
    }
    return fields
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const handleChange = (key, values) => {
    let fields = getFieldsValue()
    fields[key] = values
    fields = handleFields(fields)
    onFilterChange(fields)
  }

  const dateChange = (date, dateString) => {
    console.log(date, dateString);
  }
  const getFilterItemCol = (filterItems) => {
    const result = filterItems.map((filterItem, index) => <Col key={index} span={8}>
      <div id="parent">
        <FormItem label={filterItem.title} {...formItemLayout}>
          {filterItem.type == 'input' && getFieldDecorator(`${filterItem.id}`, {})(<Input placeholder={filterItem.placeholder} onPressEnter={handleSubmit} />)}
          {filterItem.type == 'select' && getFieldDecorator(`${filterItem.id}`, { initialValue: filterItem.defaultValue })(
            <Select
              initialValue={filterItem.defaultValue}
              getPopupContainer={() => document.getElementById("parent")}
              style={{
                width: '100%'
              }}>
              {getOptions(filterItem.options)}
            </Select>
          )}
          {filterItem.type == 'dateRule' && getFieldDecorator(`${filterItem.id}`, {})(<RangePicker
            style={{
              width: '100%'
            }}
            showTime
            initialValue={[
              moment(filterItem.bdTime || '', filterItem.dateFormat || "YYYY/MM/DD"),
              moment(filterItem.edTime || '', filterItem.dateFormat || "YYYY/MM/DD")
            ]}
            format={filterItem.dateFormat || "YYYY/MM/DD"}
            onChange={dateChange} />)}
          {filterItem.type == 'date' && getFieldDecorator(`${filterItem.id}`, {})(<DatePicker
            style={{
              width: '100%'
            }}
            onChange={dateChange} />)}
        </FormItem>
      </div>
    </Col>);
    return ((result));
  }

  // 处理下拉选项
  const getOptions = (value) => value.map(option => {
    return <Option value={option.value} key={option.value}>{option.name}</Option>
  })

  const filterItemCols = getFilterItemCol(filterItemsDealed);

  return (
    <Row gutter={24} {...filterStyle}>
      {filterItemCols}
      <Col span={isExpand ? 5 : 8} style={{
        textAlign: isExpand ? 'right' : 'left',
      }}>
        <Button type="primary" onClick={handleSubmit}>查询</Button>
        <Divider type="vertical" />
        <Button type="ghost" onClick={handleReset}>重置</Button>
        <Divider type="vertical" /> {!isExpand && <a
          style={{
            marginRight: 40
          }}
          onClick={expand}>
          展开 < Icon type="down" />
        </a>}
        {isExpand && <a
          style={{
            marginRight: 40
          }}
          onClick={noExpand}>
          收起 < Icon type="up" />
        </a>}
      </Col>
    </Row>
  )
}

OrderFilterUnExpand.propTypes = {
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func
}

export default Form.create()(OrderFilterUnExpand)
